<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.13/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <h3>{{msg}}</h3>
        <div v-if="false">
            <h4 @click="count++">count--- {{count}} {{count+1}}</h4>
            <h5>{{flag?'今天中午不吃饭':'今天中午我要吃大鸡腿...'}}</h5>
            <button @click="changeFlag">点击修改flag</button>
            <h5 v-text="text"></h5>
            <div v-if="flag" v-html="html" :data-count="count" :data-title="title"></div>
            <div v-show="flag">v-show 只是简单的样式显示和隐藏</div>
        </div>
        <div>
            <h3> word -- {{word}}</h3>
            <h4>翻转 -- {{word.split("").reverse().join('')}}</h4>
            <h5>myword -- {{myword}}</h5>
            <p @click="count++">newcount -- {{newcount}}</p>
        </div>
        <div>
            <h5>计算属性 VS 方法</h5>
            <p>word -- {{word}}</p>
            <p><input type="text" v-model="word"></p>
            <p>methods --- {{getnewword()}}</p>
            <p>计算属性 -- {{myword}}</p>
        </div>
        <div>
            <h5>computed vs watch</h5>
            <p>firstName: <input type="text" v-model='firstName'></p>
            <p>lastName: <input type="text" v-model='lastName'></p>


            <p>fullName:{{fullName}}</p>
            <p>myName:{{myName}}</p>
            <p>newName:{{newName}}</p>

        </div>
        <div>
            <h4>smallNum - {{smallNum}}</h4>
            <h4>bigNum - {{bigNum}}</h4>
            <button @click="smallNum = 5000">smallNum = 5000</button>
            <button @click="bigNum = 8000">bigNum = 8000</button>
        </div>
    </div>

    <script>
        const vm = new Vue({
            data: {
                msg: "数据绑定 && 计算属性  ",
                count: 1314,
                flag: !!0,
                title: "Are you oK",
                text: "wuhan2103-daydayup",
                toggle: true,
                html: "<p>2.1.0 起新增：如果没有提供回调且在支持 Promise 的环境中，则返回一个 Promise。请注意 Vue 不自带 Promise 的 polyfill，所以如果你的目标浏览器不是原生支持 Promise (IE：你们都看我干嘛)，你得自行 polyfill。</p>",
                word: "Are you OK - coder ",
                firstName: "zuozuomu",
                lastName: "zixi",
                fullName: "",
                smallNum: 1500,
            },
            computed: {//复杂的数据属性
                myword() {
                    return this.word.split("").reverse().join("-") + " " + new Date().getSeconds()
                },
                newcount() {
                    return this.count * 2 + 2000
                },
                myName() {
                    return this.firstName + " * " + this.lastName;
                },
                newName: {
                    get() {
                        return this.firstName + ' & ' + this.lastName;
                    },
                    set(v, oldv) {
                        console.log(v);
                        var names = v.split("&")
                        this.firstName = names[0]
                        this.lastName = names[1]
                    }
                },
                bigNum: {
                    get() {
                        return this.smallNum + 3500
                    },
                    set(v) {
                        this.smallNum = v
                    }
                }
            },
            watch: {//侦听属性
                count(v) {
                    console.log('change --count==' + v)
                },
                firstName(v, oldv) {
                    this.fullName = v + "~" + this.lastName;
                },
                lastName(v, oldv) {
                    this.fullName = this.firstName + '~' + v;
                }
            },
            methods: {//方法
                changeFlag() {
                    this.flag = !this.flag
                },
                getnewword() {
                    return this.word.split("").reverse().join("+") + " " + new Date().getSeconds()
                }
            }
        }).$mount("#app")
        vm.$watch("fullName", (v, oldv) => {

        })
    </script>
    <!-- 
            Vue.js 使用了基于 HTML 的模板语法  允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据
            Vue 将模板编译成虚拟 DOM 渲染函数
            结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少
    
            {{ }} 模板语法 双大括号语法 文本插值   插值表达式 
            无论何时，绑定的数据对象上  property 发生了改变，插值处的内容都会更新
            v-text  绑定文本  textContent 
            v-html  绑定html  innerHTML 
            v-once  你也能执行一次性地插值，当数据改变时，插值处的内容不会更新
            v-bind  绑定属性 attr  : 缩写  attribute 
            v-on    绑定事件   @  
            v-if    
            v-show 
         -->

    <!-- 
            data 属性   用来初始化 数据   简单数据    
            计算属性    对于任何复杂逻辑，你都应当使用计算属性  
            computed    是一个变量  类似data  this.xxxx
            依赖  其他某个数值   watcher 
            缓存  只有修改计算属性依赖的值 才会重新计算求值  (计算属性是基于它们的响应式依赖进行缓存的)
            
            拆分写法  
            getter  默认有一个  getter 取值 
            setter  监听计算属性的值主动改变 
    
    
            侦听属性  watch   (修改数据 触发监听 从而请求ajax)
            监听某些数据需要随着其他的数据的变化而变化   
            监听变量变化 然后获取ajax 
        -->
</body>

</html>